import React, { useContext, useEffect } from "react";
import { useLocation } from "react-router-dom";
import Navbar from "../../components/Navbar/Navbar";
import classes from "./AddSlot.module.css";
import ThemeContext from "../../store/themeContext";
import Calendar from "../../components/Calendar/Calendar";
import SlotInput from "../../components/SlotInput/SlotInput";
export default function AddSlot() {
    const {
        state: { name },
    } = useLocation();
    const inputTem = [
        {
            name: name + " Title",
            active: true,
            type: "text",
        },
        {
            name: "Amount",
            active: false,
            type: "date",
        },
    ];
    const { theme, changeShow } = useContext(ThemeContext);
    useEffect(() => {
        changeShow(false);
        return () => {
            changeShow(true);
        };
    }, [changeShow]);
    return (
        <div className={classes.addSlot} style={{ background: theme === "light" ? "#f5f6f9" : "#121212" }}>
            <Navbar linkName={"Add" + name} />
            <Calendar theme={theme} />
            {inputTem.map((item, index) => (
                <SlotInput key={index} item={item} theme={theme}>
                    {item.type === "number" && <div style={{ position: "absolute", right: "50rem", top: "50%" }}>$</div>}
                </SlotInput>
            ))}
            <div className={classes.input}>
                <div className={classes.title} style={{ color: theme === "light" ? "#222" : "#9796a1" }}>
                    {name} Category
                </div>
                <ul>
                    <li style={{ color: theme === "light" ? "#222" : "#9796a1" }} className={classes.addButton}>
                        +
                    </li>
                    <li className={`${classes.button} ${classes.active}`}>Salary</li>
                    <li className={classes.button}>Rewards</li>
                </ul>
            </div>
            <div className={classes.addSlotButton}>Add {name}</div>
        </div>
    );
}
